<template>
  <!-- <div>这是健康管理页面，要加个echarts</div> -->
  <div>
    <div id="three" ref="threeRef"></div>
    <div style="text-align: center">
      <a-button @click="qwe" type="primary">更新数据</a-button>
    </div>
    <div id="echartBox"></div>
  </div>
</template>

<script lang="ts" setup>
import { getHealthInfo, updateListHelth } from "@/apis/oldman";
import { onMounted, ref } from "vue";
import lec3d from "@trickle/lec3d";
import * as echarts from "echarts";
import * as THREE from "three";

const data = ref(null);
const threeRef = ref();
type EChartsOption = echarts.EChartsOption;

const { scene, renderer, camera, mountTo, refresh, addControls } = lec3d.init({
  lightConfigs: {
    color: "#ff3700",
  },
  axesHelperConfigs: {
    length: 0,
  },
  rendererConfigs: {
    backgroundColorOpacity: 0,
  },
});

const loadData = async () => {
  const res = await getHealthInfo();
  data.value = res.data.data;
};

const dataListOfChart = ref({
  bloodOxygen: [],
  systolicPressure: [],
  diastolicPressure: [],
  heartRate: [],
  bodyTemperature: [],
  createTime: [],
});

const initData = async () => {
  dataListOfChart.value = {
    bloodOxygen: [],
    systolicPressure: [],
    diastolicPressure: [],
    heartRate: [],
    bodyTemperature: [],
    createTime: [],
  };
  await loadData();
  data.value.map((item) => {
    dataListOfChart.value.bloodOxygen.push(item.bloodOxygen);
    dataListOfChart.value.systolicPressure.push(item.systolicPressure);
    dataListOfChart.value.diastolicPressure.push(item.diastolicPressure);
    dataListOfChart.value.heartRate.push(item.heartRate);
    dataListOfChart.value.bodyTemperature.push(item.bodyTemperature);
    dataListOfChart.value.createTime.push(item.createTime);
  });
  var chartDom = document.getElementById("echartBox")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption = {
    title: {
      text: "个人健康表",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["血氧", "收缩压", "舒张压", "心率", "体温"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: dataListOfChart.value.createTime,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "血氧",
        type: "line",
        stack: "Total",
        data: dataListOfChart.value.bloodOxygen,
      },
      {
        name: "收缩压",
        type: "line",
        stack: "Total",
        data: dataListOfChart.value.systolicPressure,
      },
      {
        name: "舒张压",
        type: "line",
        stack: "Total",
        data: dataListOfChart.value.diastolicPressure,
      },
      {
        name: "心率",
        type: "line",
        stack: "Total",
        data: dataListOfChart.value.heartRate,
      },
      {
        name: "体温",
        type: "line",
        stack: "Total",
        data: dataListOfChart.value.bodyTemperature,
      },
    ],
  };
  setTimeout(() => {
    option && myChart.setOption(option);
  }, 400);
};

const qwe = () => {
  updateListHelth().then((res) => {
    initData();
  });
};

const playAnimation = (mesh) => {
  var mixer = new THREE.AnimationMixer(mesh); //创建混合器
  var AnimationAction = mixer.clipAction(mesh.animations[0]); //返回动画操作对象
  AnimationAction.timeScale = 1000; //默认1，可以调节播放速度
  // AnimationAction.loop = THREE.LoopOnce; //不循环播放
  // AnimationAction.clampWhenFinished = true; //暂停在最后一帧播放的状态
  // 开始结束时间设置为一样，相当于播放时间为0，直接跳转到时间点对应的状态
  AnimationAction.time = 1; //操作对象设置开始播放时间
  AnimationAction.play(); //开始播放
};

onMounted(() => {
  initData();
  renderer.setPixelRatio(window.devicePixelRatio);
  camera.updateProjectionMatrix();
  addControls();
  camera.position.z = 200;
  camera.position.x = 0;
  camera.position.y = 200;
  lec3d.loadGLTF({
    modelPath: "beating-heart/scene.gltf",
    options: {
      scale: 600,
    },
    callback: (gltf, model) => {
      scene.add(model);
      camera.lookAt(model.position);
      console.log(gltf, model);
      playAnimation(gltf);
    },
  });
  mountTo(threeRef.value);
});
</script>

<style scoped>
#echartBox {
  width: 100%;
  height: 40vh;
}

#three {
  margin: 0 auto;
  width: 100%;
  height: 40vh;
}
</style>
